<template>
  <div class="q-pa-sm">
    <q-card flat square>
      <q-card-section class="q-pa-none q-py-md row">
        <div class="col-sm-2 col-xs-12 q-pb-sm">
          <q-tabs v-model="settingsTab" align="left" active-color="primary" active-bg-color="blue-1" class="text-grey-10" vertical >
            <q-tab name="basicSettings" label="用户信息" style="justify-content: left" content-class="q-pl-md" />
          </q-tabs>
        </div>
        <q-separator :vertical="$q.screen.gt.xs" v-show="$q.screen.gt.xs" />
        <div class="col-sm col-xs-12 q-px-md q-pt-none">
          <q-tab-panels v-model="settingsTab" animated transition-prev="fade" transition-next="fade" >
            <q-tab-panel name="basicSettings" class="row q-pt-sm">
              <!--<div class="text-h5 col-12 q-mb-md">用户信息</div>
              <div class="lt-sm col-xs-12 q-mb-md">
                <span class="text-center block">
                  <q-img src="/img/user/woman.jpg" width="180px" :ratio="10 / 10"/>
                </span>
                <span class="text-center block">
                  <q-btn unelevated color="primary" label="更换头像" con="unarchive" />
                </span>
              </div>-->

              <div class="gt-xs col-md-8 col-sm-7" style="padding-left: 50px;padding-top: 20px;">
                <span class="text-left block" style="padding: 0px 20px 40px 0px;">
                  <h5>用户详情</h5>
                </span>
                <span class="text-left block" style="padding: 10px 20px;">
                   用户id : {{userinfo.uid}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  用户姓名 : {{userinfo.name}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  用户电话 : {{userinfo.mobile}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  是否隐藏通讯录 : {{userinfo.is_hidden_tongxunlu}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  所属公司 : {{userinfo.shop_name}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  所属部门 : {{userinfo.shop_depart}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  微信 : {{userinfo.weixin}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  QQ : {{userinfo.qq}}
                </span>
                <span class="text-left block" style="padding: 10px 20px ;">
                  邮箱 : {{userinfo.email}}
                </span>
              </div>
            </q-tab-panel>
            <q-tab-panel name="safeSettings" class="q-pt-sm">
              <div class="text-h5 col-12 q-mb-md">日志列表</div>
              <h5 class="view_title justify-between q-px-md">
                <q-btn dense outline round icon="clear" size="sm" v-close-popup />
              </h5>
            </q-tab-panel>

          </q-tab-panels>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
import { IndexMixin } from 'boot/mixins';
import confirm from 'components/confirm';
import { requiredTest } from 'boot/inputTest';
export default {
  name: 'Settings',
  data() {
    return {
      search_name: '',
      user_status: {label: '已认证', value: 3},
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.BASE_URL}/sys/common/upload`,
      imgUrl: `${process.env.BASE_URL}/sys/common/static`,
      url: {
        detail: '/shopmemberdetail',
      },
      userinfo: {
        id: '',
        uid: '',
        shop_depart: '',
        shop_name: '',
        is_hidden_tongxunlu: '',
        exp: '',
        email: '',
        mobile: '',
        name: '',
        qq: '',
        weixin: '',
        status: '',
        remark: '',
        address: '',
        job: '',
      },
      settingsTab: 'basicSettings',
      form: {
        sid: '',
        id: ''
      },
    };
  },
  methods:{
    requiredTest,
      addBefore() {
    },
    queryParam(){
    },
    getTypeLabel( b ){
      console.log(b)
      if(b == 0){
        return '隐藏'
      }else{
        return '显示'
      }
    },
    save_user_group(){
      this.form.uid = this.form.uid
      this.form.group_id = this.user_group.value
      this.$axios.post(this.url.save_usergroupid, this.form).then((r) => {
        if(r.code == 0){
          this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
        }
      });
    },
    save_user_status(){
      this.form.uid = this.form.uid
      this.form.status = this.user_status.value // 0 待认证 ,1 未认证, 3:认证用户
      this.$axios.post(this.url.save_userstatus, this.form).then((r) => {
        if(r.code == 0){
          this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
        }
      });
    },
    save_user_name(){
      this.form.uid = this.form.uid
      this.form.name = this.userinfo.name
      this.$axios.post(this.url.detail, this.form).then((r) => {
        if(r.code == 0){
          this.$q.notify({ position: 'center', color: 'info', textColor: 'blue', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
        }
      });
    },
    getUserDetail(){
      this.$axios.post(this.url.detail, this.form).then((r) => {
        if(r.code == 0){
          this.userinfo = r.data
        }
      });
    },
    queryParam2() {
      //组合查询参数
      const data={};
      data['group_id'] = 1;
      if (this.key-0>0) {
        data['uid'] = this.key;
      }
    },
    close() {
      // this.$router.go(-1);
      this.$router.push({
        path: '/member/list',
        query: { name: this.search_name ? this.search_name : '' }
      })
    },
  },
  created() {
    this.userInfo = JSON.parse(localStorage.userInfo)
    this.form.id = this.$route.query.id
    this.form.sid = this.userInfo.id
    console.log(this.form)
    this.getUserDetail()
  },
};
</script>

<style scoped>
@import 'http://at.alicdn.com/t/font_2136554_1fgggi4y4wt.css';
</style>
